<template>
  <div class="translate">
      <div class="translate-box">
        <div class="left">
          <textarea class="translate-textarea" v-model="value"></textarea>
          <button class="translate-button" @click="translator">翻译</button>
        </div>
        <div class="right">
          <div class="translate-result" v-text="result"></div>
        </div>
      </div>
  </div>
</template>

<script>
import Msg from "@/layer/Msg";

export default {
  name: 'Translate',
  data(){
    return {
       value:'',
       result:'',
    }
  },
  methods:{
     translator(){
       let value = this.value.trim();
       if (!value){
         this.result = '';
         // this.$layer.msg('不能为空');
         // this.$layer.alert('不能为空');
         this.$layer.iframe({
           title:'',
           content: {
             content: Msg, //传递的组件对象
             parent: this,//当前的vue对象
             data:{
               msg:'不能为空'
             }//props
           },
           area:["10px","10px"]
         });
       }else {
         this.$http.get('/ajax.php',{
           a:'fy',
           f:'auto',
           t:'auto',
           w:value
         }).then((response)=>{
           console.log(response);
           this.result = response.content.out;
         }).catch((error)=>{
           console.log(error);
         })
       }
     }
  }
}
</script>

<style scoped>
  .translate-box {
    border: 1px solid red;
    width: 1050px;
    height: 800px;
    position: relative;
    margin: 0 auto;
  }
  .left,.right {
    width: 500px;
    height: 300px;
    border: 1px solid green;
    float: left;
    margin: 10px;
  }
  .translate-textarea {
    width: 495px;
    height: 295px;
  }
</style>
